如何创建带有图标的响应式导航菜单

2024-07-12 20:12| 来源: 网络整理| 查看: 265

/* 设置导航栏样式 */ .navbar { width: 100%; background-color: #555; overflow: auto;}

/* 导航栏链接 */ .navbar a { float: left; text-align: center; padding: 12px; color: white; text-decoration: none; font-size: 17px;}

/* 鼠标悬停时的导航栏链接 */ .navbar a:hover { background-color: #000;}

/* 当前/活动导航栏链接 */ .active { background-color: #4CAF50;}

/* 添加响应能力 - 将自动在小于 500 像素的屏幕上垂直而不是水平显示导航栏 */ @media screen and (max-width: 500px) { .navbar a { float: none; display: block; }}

【本文地址】

今日新闻